```vue
<template>
  <!-- 渐变背景层 -->
  <view class="bg-layer">
    <view class="bg-overlay"></view>
  </view>
  
  <view class="container">
    <!-- 教师信息卡片 -->
    <view class="teacher-card">
      <view class="card-bg"></view>
      <image class="avatar" :src="user.avatar || '/static/default-avatar.png'" mode="aspectFill" />
      <view class="teacher-info">
        <text class="welcome-text">欢迎回来</text>
        <text class="teacher-name">{{ user.name }}老师</text>
        <view class="meta-container">
          <view class="meta-item">
            <uni-icons type="contact-filled" size="16" color="#4a90e2" />
            <text class="meta-text">{{ user.username }}</text>
          </view>
          <view class="divider"></view>
          <view class="meta-item">
            <uni-icons type="calendar-filled" size="16" color="#4a90e2" />
            <text class="meta-text">{{ currentDate }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 功能区域 -->
    <view class="function-area">
      <!-- 班级统计 -->
      <view 
        class="function-card stats-card" 
        @click="navigateTo('/pages/teacher/class-stats')"
      >
        <view class="card-icon">
          <uni-icons type="list" size="28" color="#3a7bd5" />
        </view>
        <text class="card-title">班级统计</text>
        <view class="card-badge" v-if="false">3</view>
      </view>

      <!-- 上传题目 -->
      <view 
        class="function-card upload-card" 
        @click="navigateTo('/pages/teacher/upload-questions')"
      >
        <view class="card-icon">
          <uni-icons type="plus-filled" size="28" color="#fff" />
        </view>
        <text class="card-title">上传题目</text>
      </view>
    </view>
  </view>
  
     <!-- 视频管理 -->
         <view 
           class="function-card upload-card" 
           @click="navigateTo('/pages/teacher/TeacherVideoManagement')"
         >
           <view class="card-icon">
             <uni-icons type="videocam" size="28" color="#fff" />
           </view>
           <text class="card-title">视频管理</text>
         </view>
  
  <!-- 底部操作栏 -->
  <view class="admin-footer">
    <button class="logout-button" @click="logout">
      <view class="button-content">
        <uni-icons type="logout" size="20" color="#FF5252"></uni-icons>
        <text>退出登录</text>
      </view>
    </button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      user: {
        id: '',
        username: '',
        name: '',
        avatar: '',
        role: ''
      },
      currentDate: ''
    };
  },
  onLoad() {
    this.loadUserData();
    this.updateCurrentDate();
  },
  methods: {
    updateCurrentDate() {
      const now = new Date();
      const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      this.currentDate = `${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日 ${weekdays[now.getDay()]}`;
    },

    loadUserData() {
      const user = uni.getStorageSync('user') || {};
      if (!user.id) {
        uni.redirectTo({ url: '/pages/student/login' });
        return;
      }
      
      this.user = {
        id: user.id,
        username: user.username || '未设置账号',
        name: user.name || '教师',
        avatar: user.avatar || '',
        role: user.role
      };
    },
	
    logout() {
      uni.showModal({
        title: '退出确认',
        content: '您确定要退出教师账户吗？',
        confirmColor: '#FF5252',
        success: (res) => {
          if (res.confirm) {
            uni.removeStorageSync('user');
            uni.redirectTo({ url: '/pages/student/login' });
          }
        }
      });
    },

    navigateTo(url) {
      uni.navigateTo({ url });
    }
  }
};
</script>

<style scoped>
/* 全局样式 */
.container {
  position: relative;
  padding: 24px 20px;
  min-height: 100vh;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

/* 背景层 */
.bg-layer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 40vh;
  background: linear-gradient(135deg, #3a7bd5 0%, #00d2ff 100%);
  z-index: 0;
  border-radius: 0 0 20% 20%;
  overflow: hidden;
}

.bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0.2) 0%, transparent 100%);
}

/* 教师卡片 */
.teacher-card {
  position: relative;
  display: flex;
  align-items: center;
  padding: 24px;
  background: rgba(255,255,255,0.98);
  border-radius: 20px;
  box-shadow: 0 12px 24px rgba(58, 123, 213, 0.12);
  margin-bottom: 24px;
  overflow: hidden;
  /* 添加 transition 支持 CSS 动画 */
  transition: transform 0.15s ease-in-out;
}

.teacher-card:active {
  transform: scale(0.98);
}

.card-bg {
  position: absolute;
  top: 0;
  right: 0;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(58, 123, 213, 0.05) 100%);
}

.avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  margin-right: 20px;
  border: 3px solid rgba(255,255,255,0.9);
  box-shadow: 0 8px 16px rgba(0,0,0,0.08);
  flex-shrink: 0;
}

.teacher-info {
  flex: 1;
  overflow: hidden;
}

.welcome-text {
  font-size: 15px;
  color: #666;
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
}

.teacher-name {
  font-size: 22px;
  font-weight: 700;
  color: #333;
  display: block;
  margin-bottom: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.meta-container {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.meta-item {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #666;
}

.meta-text {
  margin-left: 6px;
  white-space: nowrap;
}

.divider {
  width: 1px;
  height: 16px;
  background: rgba(0,0,0,0.08);
}

/* 功能区域 */
.function-area {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.function-card {
  position: relative;
  padding: 20px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* 修改 transition，移除 all */
  transition: transform 0.1s ease-in-out;
}

.function-card:active {
  transform: scale(0.96);
}

.stats-card {
  background: rgba(255,255,255,0.95);
  box-shadow: 0 8px 16px rgba(58, 123, 213, 0.08);
}

.upload-card {
  background: linear-gradient(135deg, #3a7bd5 0%, #00d2ff 100%);
  box-shadow: 0 8px 16px rgba(58, 123, 213, 0.2);
}

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.stats-card .card-icon {
  background: rgba(58, 123, 213, 0.1);
}

.upload-card .card-icon {
  background: rgba(255,255,255,0.2);
}

.card-title {
  font-size: 16px;
  font-weight: 600;
}

.stats-card .card-title {
  color: #333;
}

.upload-card .card-title {
  color: #fff;
}

.card-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #FF5252;
  color: white;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 底部操作栏 */
.admin-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx 30rpx;
  background-color: #fff;
  box-shadow: 0 -4rpx 20rpx rgba(0,0,0,0.05);
  z-index: 3;
}

.logout-button {
  height: 88rpx;
  background-color: rgba(255, 82, 82, 0.05);
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FF5252;
  font-size: 30rpx;
  border: 1rpx solid rgba(255, 82, 82, 0.2);
  transition: transform 0.1s ease-in-out, background-color 0.3s;
}

.logout-button:active {
  transform: scale(0.98);
  background-color: rgba(255, 82, 82, 0.1);
}

.button-content {
  display: flex;
  align-items: center;
  gap: 12rpx;
}
</style>